
<template>
  <view v-if="visible" class="global-text" :style="textStyle">
    {{ content }}
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  content: { type: String, default: '全局文字' },
  visible: { type: Boolean, default: true },
  position: { type: String, default: 'top' },
  color: { type: String, default: '#333' },
  fontSize: { type: String, default: '28rpx' },
  bgColor: { type: String, default: 'transparent' }
})

const textStyle = computed(() => ({
  color: props.color,
  fontSize: props.fontSize,
  backgroundColor: props.bgColor,
  position: 'fixed',
  [props.position]: '20rpx',
  left: 0,
  right: 0,
  textAlign: 'center',
  padding: '10rpx',
  zIndex: 9998
}))
</script>

<style scoped>
.global-text {
  transition: all 0.3s;
}
</style>
